$rex-screen : 750;
$rem : $rex-screen/10;
$sreen : 500px;


$black-dark : #0B0C0D;
$black: #626970;
$black-light : #9DA2A6;
$black-lighter : #F5F6F7;


$border : #D8D8D8;
$border-light : #E8ECF0;

$blue : #556AAE;

@function rem($px){
  @return round(($px/$rem)*100)/100+rem;
}

@mixin border-half($color,$border){
  content: "";position: absolute;left: 0;top: 0;z-index:-1;width: 200%;height:200%;#{$border}:1px solid $color;transform-origin: 0 0;transform: scale(.5, .5);
}

@mixin border-half-all($color,$border){
  position: relative;
  &:before{
    position: absolute;content: '';width: 100%;left: 0;#{$border}: 0;height: 1px;transform: scale(1,0.5);transform-origin: center #{$border};border-#{$border}: 1px solid $color;
  }
}

@mixin img-bg-show{
  background: $black-light no-repeat center center / cover;
}

@mixin head($width){
  @include img-bg-show;border-radius: 8px;width: rem($width);height: rem($width);float: left;
}
